<template>
    <h3>ref的浅层作用形式,只有对 .value 的访问是响应式的，是RefImpl的实例</h3>
    <h3>原理：ref做到深响应式需要toReactive转reactive代理对象，所有只需直接返回RefImpl类创建的实例即可，内部的get value()，set value()方法实现响应式</h3>
    <h3>ref是对象的get，set value的方法实现的响应式，而reactive是整个对象的代理实现的响应式</h3>
    <span>{{ foo }}</span>
    <el-button @click="handleClick">.value修改</el-button>
</template>

<script setup>
import { shallowRef } from "vue"

const foo = shallowRef({
    counter: {
        c: 1
    }
})

const handleClick = () => {
    foo.value.counter = 1
    console.log(foo);
}
</script>

<style lang="scss" scoped>
</style>